<template>
  <div class="cost-summary">
    <ProTable
      ref="abnormal_qr_pay_order"
      :immediate="true"
      :request="queryAbnormalQrPayOrderList"
      :search-form="formList"
      :columns="columns"
      :pagination="true"
      :before-search-submit="beforeSearchSubmit"
    >
    </ProTable>
  </div>
</template>

<script>
import ProTable from '@/components/ProTable';
import {omit} from 'lodash';

import { queryAbnormalQrPayOrderList } from '@/api/order';

import { getDateRangeDate } from '@/utils/date'
import util from '@/utils/util'
import Authc from "@/components/Authc";

export default {
  name: 'AbnormalQrPayOrder',
  components: {
    ProTable,
    Authc
  },
  data() {
    return {
      formList: [
        {
          type: 'input',
          name: 'orderId',
          label: '订单号',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'flowId',
          label: '支付流水号',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'qrNo',
          label: 'C2B码',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'mobile',
          label: '手机号',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'merchantName',
          label: '商户名称',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'merchantId',
          label: '商户id',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'input',
          name: 'voucherNum',
          label: '凭证号',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'range',
          name: 'date',
          label: '创建时间',
          value: '',
          props: {
            placeholder: '请选择',
            format: 'yyyy年MM月dd日'
          }
        },
      ],
      columns: [
        {
          title: '用户id',
          width: 195,
          key: 'uid'
        },
        {
          title: '订单号',
          width: 185,
          key: 'orderId'
        },
        {
          title: '支付流水号',
          width: 175,
          key: 'flowId'
        },
        {
          title: 'C2B码',
          width: 185,
          key: 'qrNo'
        },
        {
          title: '订单金额',
          width: 100,
          key: 'amount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.amount));
          }
        },
        {
          title: '支付金额',
          width: 100,
          key: 'payAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.payAmount));
          }
        },
        {
          title: '优惠金额',
          width: 100,
          key: 'couponAmount',
          render: (h, params) => {
            return h("span", util.getYuan(params.row.couponAmount));
          }
        },
        {
          title: '商户名称',
          width: 150,
          key: 'merchantName'
        },
        {
          title: '商户id',
          width: 150,
          key: 'merchantId'
        },
        {
          title: '交易凭证号',
          width: 180,
          key: 'voucherNum'
        },

        {
          title: '支付时间',
          width: 150,
          key: 'payTime'
        },
        {
          title: '创建时间',
          width: 150,
          key: 'createdDt'
        }
      ]
    };
  },
  computed: {

  },
  methods: {
    queryAbnormalQrPayOrderList,
    exportExcelAll () {

    },
    exportExcel() {
    },
    beforeSearchSubmit(data) {
      const { date } = data
      const [startDate, endDate] = getDateRangeDate(date)
      console.log(startDate, endDate)
      if(startDate){
        data.createdDtBegin = util.formatDate(startDate)
      }
      if(endDate){
        data.createdDtEnd = util.formatDate(endDate)
      }
      return omit(data, 'date')
    },
  }
};
</script>
